<template>
  <div>
    <!--  :row-class-name="tableRowClassName" -->
    <el-table
      :data="tableData"
      style="width: 100%"
      :height="tableConfig.height"
      :stripe="tableConfig.stripe"
      table-layout="auto"
      :highlight-current-row="tableConfig.highlightCurrentRow ?? false"
      @selection-change="selectionChangeHandle"
      @current-change="handleCurrentChange"
      :header-cell-style="{
        background: '#F2F3F5',
        color: '#606266',
        textAlign: 'center'
      }"
      :cell-style="{ fontSize: '14px', color: '#1D2129', textAlign: 'center' }"
    >
      <el-table-column
        v-if="tableConfig.showSelect"
        type="selection"
        :selectable="selectable"
        width="60"
      />
      <el-table-column
        v-if="tableConfig.showIndex"
        label="序号"
        type="index"
        fixed
        width="60px"
        align="center"
      >
        <template #default="scope">
          <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <template v-for="item in tableColumn">
        <el-table-column
          :label="item.label"
          :prop="item.prop"
          :align="item.align ?? null"
          :width="item.width ?? null"
          :min-width="item.minWidth ?? null"
          :show-overflow-tooltip="item.showOverflowTooltip ?? false"
          :fixed="item.fixed ?? false"
        >
          <template #default="{ row }">
            <!-- 可点击：ETableType[2] -->
            <template v-if="item.type === ETableType[2]">
              <div>
                <el-link
                  :icon="
                    item.linkBtnOptions?.iconHref
                      ? item.linkBtnOptions?.iconHref
                      : null
                  "
                  :type="
                    item.linkBtnOptions?.type
                      ? item.linkBtnOptions.type
                      : 'primary'
                  "
                  :underline="
                    item.linkBtnOptions?.underline
                      ? item.linkBtnOptions.underline
                      : false
                  "
                  :disabled="
                    item.linkBtnOptions?.disabled
                      ? item.linkBtnOptions.disabled
                      : false
                  "
                  @click="item.clickHandle ? item.clickHandle(row) : ''"
                >
                  <slot name="clickableOk"></slot>
                  {{
                    item.vauleGetter ? item.vauleGetter(row) : row[item.prop]
                  }}
                </el-link>
              </div>
            </template>

            <!-- 操作：ETableType[3] -->
            <template v-else-if="item.type === ETableType[3]">
              <div
                style="
                  display: flex;
                  justify-content: center;
                  grid-column-gap: 10px;
                "
              >
                <template v-for="ele in item.btnList">
                  <el-link
                    :icon="ele?.iconHref ? ele?.iconHref : null"
                    :type="ele?.type ? ele.type : 'primary'"
                    :underline="ele?.underline ? ele.underline : false"
                    :disabled="
                      ele.disabledGetter
                        ? ele.disabledGetter(row)
                        : ele?.disabled
                          ? ele.disabled
                          : false
                    "
                    @click="ele.clickHandle ? ele.clickHandle(row) : ''"
                  >
                    <slot name="operate"></slot>
                    {{ ele.vauleGetter ? ele.vauleGetter(row) : ele.label }}
                  </el-link>
                </template>
              </div>
            </template>

            <!-- 插槽：ETableType[1] -->
            <template v-else-if="item.type === ETableType[4]">
              <slot :name="item.prop" :row="row"></slot>
            </template>

            <!-- 普通：ETableType[1] -->
            <template v-else>
              <span>
                {{ item.vauleGetter ? item.vauleGetter(row) : row[item.prop] }}
              </span>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script setup lang="ts">
/** 通用表格 */
import { toRefs, ref } from 'vue';
import type { ITableColumn, ITableConfig } from './tablePageInterface';
import { ETableType } from './tableTools';

const props = defineProps({
  tableConfig: {
    type: Object,
    default: (): ITableConfig => ({
      height: '50vh',
      fit: true,
      showIndex: false,
      showSelect: false,
      stripe: false
    })
  },
  tableColumn: {
    type: Array<ITableColumn>,
    default: (): Array<ITableColumn> => []
  },
  tableData: {
    type: Array<any>,
    default: (): Array<any> => []
  }
});
const { tableData } = toRefs(props);

const emits = defineEmits(['selectable', 'selectableChange', 'currentChange']);

// 多选框动态显示
function selectable(row: any) {
  let flag = true;
  emits('selectable', row, (data: boolean) => (flag = data));
  return flag;
}

// 多选框选择变化
function selectionChangeHandle(selection: Array<any>) {
  emits('selectableChange', selection);
}

// 单选框选择变化
function handleCurrentChange(val: any[]) {
  emits('currentChange', val);
}

const pageNum = ref(1);
const pageSize = ref(10);
</script>

<style lang="scss" scoped></style>
